<template>
	<view class="video-preview-wrap box relative full flex column" :style="{'--padding':statusBarHeight_}">
		<view class="fixed-header">
			<image @click="backHandle" src="../static/chevron-left-white.png" mode="aspectFill" class="chevron-icon">
			</image>
		</view>
		<view class="relative flex-1 w-100">
			<video :enable-progress-gesture="true" :initial-time="0" @timeupdate="onTimeUpdate" loop :muted="isMuted"
				id="previewRef" :show-center-play-btn="true" :controls="true" class="full" :src="source"
				object-fit="contain" @loadedmetadata="videoLoadEnd" autoplay />
		</view>
		<!-- <view class="fixed-progress">
			<view class="progress-inner" :style="{'--width':progress}"></view>
		</view> -->
	</view>
</template>

<script>
	export default {
		onLoad(ev) {
			if (!ev.hasOwnProperty('url')) return this.$toast({ title: '参数错误' }, () => {
				uni.navigateBack()
			})
			const { url } = ev
			this.source = decodeURIComponent(url)
		},
		onReady() {
			this.videoRef = uni.createVideoContext('previewRef', this)
		},
		methods: {
			backHandle() {
				uni.navigateBack()
			},
			onTimeUpdate(ev) {
				const { currentTime, duration } = ev.detail
				const pix = (currentTime / duration).toFixed(2)
				this.progress = `${pix * 100}%`
			},
			videoLoadEnd() {
				this.videoRef = uni.createVideoContext('previewRef', this)
				this.videoRef.play()
			},
		},
		data() {
			return {
				isMuted: false,
				source: '',
				progress: '0%',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-preview-wrap {
		background: #000000;
		--header-height: 88rpx;
		padding: var(--padding) 0 calc(env(safe-area-inset-bottom) + 16rpx);

		.fixed-header {
			width: 100%;
			height: var(--header-height);
			display: flex;
			align-items: center;
			padding: 0 32rpx;

			.chevron-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.fixed-progress {
			width: 100%;
			height: 2rpx;

			.progress-inner {
				width: var(--width);
				height: 2rpx;
				background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
			}
		}

		.video-target {}
	}
</style>